@charset "UTF-8"
/* css document */


header, nav, footer, article, section, aside {
	display:block;
}

/* align center*/
#logo {vertical-align:center;}
a {text-decoration:none; color:blue;}
a:hover {text-decoration:underline; color:red;}

body {background-color:#d1d0d0; height:100%;}
#mainwrap {background-color:#eeeeee; height:100%;}

/** header **/
#top {height:50px; background-color:#eae9ed; display:block;}
#main-header {height:100px; background-color:#f9f9f9}
#main-header #logo {height:100%;background:transparent url(../images/0logo.png) no-repeat top center;}
#main-header #slash{height:100%;background:transparent url(../images/0-slash.png) no-repeat top right;}
#main-header #ballon{height:100px;width:100px; background:transparent url(../images/0-ballon-2.png) no-repeat;position:absolute; margin:-20px 0px 0px -50px;}
#main-header #ballon1{height:80px;width:80px; background:transparent url(../images/0-ballon-1.png) no-repeat; margin-top:-60px; margin-left:530px;}

#main-nav {height:50px; line-height:50px;width:960px; background:transparent url(../images/1-main-nav-m.png) repeat-x top center;}
	#left {height:50px; width:10px; background:transparent url(../images/1-main-nav-l.png) no-repeat top left; float:left;}
	#mid {height:50px; width:940px; float:left; text-align:center;}
		#vert-nav, #vert-nav ul, #vert-nav ul {height:50px; width:940px;}
		#vert-nav ul li {height:50px; width:100px; float:left;}
		#vert-nav ul li a{color:#ffffff; height:50px; text-decoration:none;}
		#vert-nav ul li:first-child {margin-left:165px;}
		#vert-nav ul li:hover {background:transparent url(../images/1-main-nav-hover.png) repeat-x top center;}
		#vert-nav .vert-sep{float:left;height:50px; width:1px;background:transparent url(../images/1-main-nav-vert-sep3.png) no-repeat top center;}
	#right {height:50px; width:10px; background:transparent url(../images/1-main-nav-r.png) no-repeat top right; float:left;}
	
/**current menu page **/
#index .menu-home,
#laptop .menu-laptop,
#printer .menu-printer,
#device .menu-device,
#computer .menu-computer,
#contact .menu-contact
{
	background:transparent url(../images/1-main-nav-current.png) repeat-x top center;
}

#featured {height:300px;width:960px; float:left;background-color:#f9f9f9; background:transparent url(../images/2-features-border.png) no-repeat center; position:relative;}
#featured  img{height:290px; width:940px;margin:5px 10px 5px 10px;}
#breadcrumbs {height:30px; width:100%;line-height:30px;float:left; background-color:#ffcc00;}

#main-content {height:100%; background-color:#f9f9f9; height:100%; float:left;}
/*left content*/
#left-aside {float:left; width:240px;}
#left-aside #search .search-infor, #search .search-selectbox{height:20px;line-height:20px;font-size:13px; text-align:right;}
#left-aside #search .search-infor:first-child{margin:20px 10px;}
#left-aside #search .search-selectbox{width:125px; text-align:right;  margin-right:10px;}
#left-aside #btn_search {line-height:20px; background:#FFCC00; float:left; padding:5px; border: 1px solid #fff; -webkit-border-radius:5px; margin-bottom:5px; text-align:center;float:right;}
/* right content */
#content {width:720px; float:left; height:100%;}
#content #rnav {height:25px;}
#content #vertboder {border-bottom:1px #000000 dotted; margin-bottom:5px; margin-top:5px;}
#content #product-info {border:1px solid #04AEFD; height:25px; line-height:25px; margin:5px 5px 0px 5px;}
#content .product-list-vsep {background-color:#ffcc00; height:3px;} /*vertical seprator between product-list*/
#content  #product-info {color:#DD4814;}


#content .product figure .product-image{width:160px; height:160px; border:1px solid #00ffff;
	/* make gradient background for image */
	background-image: linear-gradient(bottom, rgb(237,237,237) 4%, rgb(255,255,255) 100%);
	background-image: -o-linear-gradient(bottom, rgb(237,237,237) 4%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(237,237,237) 4%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(237,237,237) 4%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(237,237,237) 4%, rgb(255,255,255) 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.04, rgb(237,237,237)),
		color-stop(1, rgb(255,255,255))
);
}

#content .product img{width:120px; height:120px; vertical-align:middle;}
#content .product .product-image .more-info {height:40px; background-color:#04aefd; width:100%; float:left; color:#ffffff; font-size:20px; line-height:40px;}
#content .product .product-image .more-info span{margin-left:10px;}
#content .product .product-image .more-info a{margin-left:10px;}

#content #rnav {text-align:center; width:700px;}
#content #rnav ul{margin:0 auto;}
#content #rnav ul li{float:left;}
#content #rnav #nav-menu  ul li .button {
	height:10px;
	font-size: 16px;
	color: #0F0F0F;
	padding: 3px 10px;
	margin: 0px 25px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#bfbfbf);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#bfbfbf));
	border-radius: 33px;
	-moz-border-radius: 33px;
	-webkit-border-radius: 33px;
	border: 1px solid #c4c4c4;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(235,235,235,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(235,235,235,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}

#content .content-footer {background-color:#ffcc00; height:40px; padding-left:10px; opacity:0.8}
#content .content-footer #nav2 {margin:auto; width:260px; height:40px;}
#content .content-footer #nav2 li {
	margin:9px auto;
	text-align:center;
	display:inline-table;
	width:30px;
	height:20px;
	border:1px solid #ffffff;
	border-radius: 4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
#content .content-footer #nav2 li a {width:50px;text-shadow: 1px 1px 0px #fff;}
#content .content-footer #nav2 li a:hover {color:#DB5E0B;}


#search-asided, #search figcaption, #catalog-header, #content #rnav{
	height:30px; line-height:30px; text-align:center;
	/*background gradients */
	background:#cfcfcf;
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(207,207,207)), color-stop(1, rgb(255,255,255)));
	background:-moz-linear-gradient(center bottom, rgb(207,207,207) 0%, rgb(255,255,255) 100%);
	
	/* border radius */
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border:1px solid #fff;
	
	/* text shadow */
	text-shadow: 1px 1px 0px #fff;
	
	/* box shadow*/
	-moz-box-shadow: 0 1px 3px #333;
	-webkit-box-shadow: 0 1px 3px #333;
	box-shadow: 0 1px 3px #333;
}

#main-footer {height:150px; float:left;
background: url(../images/5-footer-l.png) top left no-repeat,
url(../images/5-footer-m.png) top center,
url(../images/5-footer-r.png) top right no-repeat;}
#main-footer {color:#fffff0; text-shadow:1px 1px 0px #000009; font-size:14px;}
#main-footer #footer1 {margin-left:-10px; margin-top:5px;}
#main-footer #footer2,#footer3 {margin:5px 5px;}
#main-footer span{color:#FED532; font-size:26px; }
#main-footer p {margin:10px;}
#main-footer .footer-vsep {height:150px; width:10px;background:transparent url(../images/5-footer-vert-sep.png) top left no-repeat;float:left;}

#hfwrap {width:100%; background:transparent ;height:100%; position:relative;}
#lnwrap {width:100%; background:transparent;}

#hfwrap3 {
	height:100%; 
	width:100%; 
	border-bottom:10px solid rgba(255, 255, 255, 0.5);
}

#nav {
    box-shadow:2px 2px 8px #ffffee;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}














